<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>

</body>
<script src="./tools.js"></script>
<script>
function Fire(){
    // 创建夜空
    this.nightSky = document.createElement('div')
    // 设置样式
    this.setStyle(this.nightSky,{
        width:"800px",
        height:"500px",
        backgroundColor:"#333",
        position:"relative",
        border:"10px solid #00f"
    })
    // 将夜空显示
    document.body.appendChild(this.nightSky)
}
// 绑定事件的初始化方法
Fire.prototype.init = function(){
    this.nightSky.onclick = e=>{
        var e = e || window.event;
        var x = e.offsetX
        var y = e.offsetY
        this.toSky(x,y)
    }
}
// 升空
Fire.prototype.toSky = function(x,y){
    // 创建一个小烟花
    var div = document.createElement('div')
    this.setStyle(div,{
        width:"10px",
        height:"10px",
        backgroundColor:this.getColor(),
        position:"absolute",
        left:x+"px",
        bottom:0
    })
    this.nightSky.appendChild(div)
    // 小烟花升空
    animate(div,{
        top:y
    },()=>{
        this.nightSky.removeChild(div)
        this.createManyFire(x,y)
    })
}
// 创建很多小烟花
Fire.prototype.createManyFire = function(x,y){
    let num = this.random(30,35)
    // 生成很多小烟花
    for(let i=0;i<num;i++){
        let fire = document.createElement('div')
        this.setStyle(fire,{
            width:"10px",
            height:"10px",
            backgroundColor:this.getColor(),
            position:"absolute",
            left:x+"px",
            top:y+"px",
            borderRadius:"50%"
        })
        this.nightSky.appendChild(fire)
        animate(fire,{
            left:this.random(0,790),
            top:this.random(0,490)
        },()=>{
            this.nightSky.removeChild(fire)
        })
    }
}
// 获取随机数的方法
Fire.prototype.random = function(a,b){
    var max = a;
    var min = b;
    if(a<b){
        max = b;
        min = a
    }
    return parseInt(Math.random()*(max-min))+min
}
// 随机颜色方法
Fire.prototype.getColor = function(){
    return `rgb(${this.random(0,256)},${this.random(0,256)},${this.random(0,256)})`
}
// 设置样式的方法
Fire.prototype.setStyle = function(ele,styleObj){
    for(var attr in styleObj){
        ele.style[attr] = styleObj[attr]
    }
}

var f = new Fire()
f.init()

</script>
</html>